<template>
    <div class="case_box" @click="lookDetail">
        <div class="img_box">
            <li-image :src="getImage(info.casePictures)" class="img" v-if="info.casePictures" fit="contain" :is-preview="false"></li-image>
            <img src="@/assets/images/case.png" class="img" alt="" v-else>
        </div>
        <div class="title van-multi-ellipsis--l2">{{ info.caseTitle }}</div>
        <div class="footer">
            <div class="user">
                <li-image :src="getImage(info.caseAvatar)" class="img" round v-if="info.caseAvatar" fit="contain" :is-preview="false"></li-image>
                <img src="@/assets/images/avatar_user.png" class="img" alt="" v-else>
                <span class="name van-ellipsis">{{ info.caseAuthor }}</span>
            </div>
            <div class="visit">
                <img src="@/assets/images/browse.png" class="img" alt="">
                <span>{{ info.initReadCnt }}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'UserCase',
    props: {
        info: {
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    data() {
        return {

        }
    },
    created() {

    },
    methods: {
        // 查看详情
        lookDetail() {
            let o = this.info || {}
            this.$router.push({
                path: `/inquire/case/detail/${o.id}`,
            })
        },

        // 获取图片
        getImage(str) {
            if (!str) {
                return ''
            }
            let arr = str.split(',');
            let _path = arr[0]
            return _path
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>